<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>*{
			/* 初始化所有标签的内边距和外边距,协助样式中最开始的位置 */
				/* 通配符:指所有的标签 */ 
				margin: 0;
				padding: 0;
		}
			.box1{
				width: 600px;
				height: 600px;
				background-color: pink;
				/* 设置快捷盒子水平居中：给盒子的左右外边距设置为auto（自动的） */
				/* margin:10px auto 0; */
				margin-bottom: 80px;
			}
			.box2{
				margin-top: 120px;
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
			/* 外边距问题1:相邻块级元素垂直外边距合并,
				解决:一般只给其中一个盒子设置外边距 
				外边距问2：嵌套块级盒子之间外边距的塌陷。
					解决办法1：给父盒子添加一个边框
					解决办法2：给父盒子添加内边距，但是会导致父盒子被撑大
					解决办法3：给父盒子添加样式overflow: hidden;使用最多解决
				*/
			   .waibox{
				   width: 600px;
				   height: 600px;
				   background-color: red;
				   margin: 100px;
				   /* border: 1px solid black; */
				   /* padding-top: 100px; */
				   overflow: hidden;	/* 超出部分隐藏,能解决外边距塌陷问题 */
			   }
			   .sbox{
				   width: 300px;
				   height: 300px;
				   background-color: black;
				   margin-top: 100px;
			   }
		</style>
	</head>
	<body>
		
		<div class="box1"></div>
		<div class="box2"></div>
		<div class ="waibox">
			<div class="sbox"></div>
		</div>
	</body>
</html>
